

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  
    <meta name="baidu-site-verification" content="jre71SFl7b" />
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="lixinsta">
  <meta name="keywords" content="">
  <title>HTML列表、表格、表单 - 自学前端的程序猿</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.0.0/styles/vs2015.min.css" />
  

  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_6peoq002giu.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_pjno9b9zyxs.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.0.2"><link rel="alternate" href="/atom.xml" title="自学前端的程序猿" type="application/atom+xml">
</head>


<body>
  <header style="height: 40vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>自学前端的程序猿</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="iconfont icon-images"></i>
                思维导图
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                
                  
                  
                  
                  <a class="dropdown-item" target="_blank" rel="noopener" href="https://www.processon.com/view/5f3944647d9c0806d41a7d7a#map">
                    
                    HTML
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" target="_blank" rel="noopener" href="https://www.processon.com/view/5f3a1982079129531b5ec238#map">
                    
                    CSS
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/docs/icon/">
                    
                    JavaScript
                  </a>
                
              </div>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container page-header text-center fade-in-up">
            <span class="h2" id="subtitle">
              
            </span>

            
              
  <div class="mt-3 post-meta">
    <i class="iconfont icon-date-fill" aria-hidden="true"></i>
    <time datetime="2020-08-15 09:21" pubdate>
      2020年8月15日 上午
    </time>
  </div>


<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      3.4k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      40
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto" id="post">
            <!-- SEO header -->
            <h1 style="display: none">HTML列表、表格、表单</h1>
            
            <div class="markdown-body" id="post-body">
              <h1 id="列表标签（重点）"><a href="#列表标签（重点）" class="headerlink" title="列表标签（重点）"></a>列表标签（重点）</h1><ul>
<li><p><strong>概念</strong>：</p>
<p>容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表</p>
</li>
<li><p><strong>特点</strong>：</p>
<p>列表最大的特点就是  整齐 、整洁、 有序，跟表格类似，但是他可组合自由度会更高。</p>
</li>
</ul>
<h2 id="无序列表-ul-（重点）"><a href="#无序列表-ul-（重点）" class="headerlink" title="无序列表 ul （重点）"></a>无序列表 ul （重点）</h2><p>无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：</p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>列表项1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>列表项2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>列表项3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  ......
<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre></div>

<p><strong>脚下留心：</strong></p>
<div class="hljs"><pre><code class="hljs xml">1. <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>中只能嵌套<span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>，直接在<span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>标签中输入其他标签或者文字的做法是不被允许的。
2. <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>与<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！</code></pre></div>

<h2 id="有序列表-ol-（了解）"><a href="#有序列表-ol-（了解）" class="headerlink" title="有序列表 ol （了解）"></a>有序列表 ol （了解）</h2><p>有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：</p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>列表项1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>列表项2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>列表项3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
  ......
<span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span></code></pre></div>

<p>  所有特性基本与ul 一致。  但是实际中比 无序列表 用的少很多。</p>
<h2 id="自定义列表（理解）"><a href="#自定义列表（理解）" class="headerlink" title="自定义列表（理解）"></a>自定义列表（理解）</h2><p>定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：</p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">dl</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>名词1<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>名词1解释1<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>名词1解释2<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>

  <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>名词2<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>名词2解释1<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>名词2解释2<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>

<span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span></code></pre></div>

<h2 id="列表总结"><a href="#列表总结" class="headerlink" title="列表总结"></a>列表总结</h2><table>
<thead>
<tr>
<th>标签名</th>
<th align="center">定义</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody><tr>
<td>&lt;ul&gt;&lt;/ul&gt;</td>
<td align="center"><strong>无序标签</strong></td>
<td align="left">里面只能包含li    没有顺序，我们以后布局中最常用的列表</td>
</tr>
<tr>
<td>&lt;ol&gt;&lt;/ol&gt;</td>
<td align="center">有序标签</td>
<td align="left">里面只能包含li    有顺序， 使用情况较少</td>
</tr>
<tr>
<td>&lt;dl&gt;&lt;/dl&gt;</td>
<td align="center">自定义列表</td>
<td align="left">里面有2个兄弟， dt 和 dd</td>
</tr>
</tbody></table>
<h1 id="表格-table-会使用"><a href="#表格-table-会使用" class="headerlink" title="表格 table(会使用)"></a>表格 table(会使用)</h1><p><strong>表格作用：</strong></p>
<p>存在即是合理的。  表格的现在还是较为常用的一种标签，但不是用来布局，<strong>常见显示、展示表格式数据。</strong></p>
<p>因为它可以让数据显示的非常的规整，可读性非常好。</p>
<p><strong>特别是后台展示数据的时候表格运用是否熟练就显得很重要</strong>，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。</p>
<h2 id="创建表格"><a href="#创建表格" class="headerlink" title="创建表格"></a>创建表格</h2><p>在HTML网页中，要想创建表格，就需要使用表格相关的标签。</p>
<p><strong>创建表格的基本语法：</strong></p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>单元格内的文字<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span>
    ...
  <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span>
  ...
<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span></code></pre></div>

<p>在上面的语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释</p>
<ol>
<li><p><code>table</code>用于定义一个表格标签。</p>
</li>
<li><p><code>tr</code>标签 用于定义表格中的行，必须嵌套在 table标签中。</p>
</li>
<li><p><code>td</code> 用于定义表格中的单元格，必须嵌套在&lt;tr&gt;&lt;/tr&gt;标签中。</p>
</li>
<li><p>字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。</p>
</li>
</ol>
<img src="./07table基本结构.jpg" srcset="/img/loading.gif">

<p><strong>总结：</strong> </p>
<ul>
<li>表格的主要目的是用来显示特殊数据的</li>
<li>一个完整的表格有表格标签（table），行标签（tr），单元格标签（td）组成，没有列的标签</li>
</ul>
<ul>
<li>&lt;tr&gt;&lt;/tr&gt;中只能嵌套&lt;td&gt;&lt;/td&gt; 类的单元格</li>
<li>&lt;td&gt;&lt;/td&gt;标签，他就像一个容器，可以容纳所有的元素</li>
</ul>
<h2 id="表格属性"><a href="#表格属性" class="headerlink" title="表格属性"></a>表格属性</h2><p>表格有部分属性我们不常用，这里重点记住 cellspacing 、 cellpadding。</p>
<img src="./tt.png" srcset="/img/loading.gif" />

<p>我们经常有个说法，是三参为0，  平时开发的我们这三个参数    border  cellpadding  cellspacing  为  0</p>
<img src="./07table表格属性.jpg" srcset="/img/loading.gif">

<h2 id="表头单元格标签th"><a href="#表头单元格标签th" class="headerlink" title="表头单元格标签th"></a>表头单元格标签th</h2><ul>
<li><p><strong>作用</strong>：</p>
<ul>
<li>一般表头单元格位于表格的第一行或第一列，并且文本加粗居中</li>
</ul>
</li>
<li><p><strong>语法</strong>：</p>
<ul>
<li>只需用表头标签&lt;th&gt;&lt;/th&gt;替代相应的单元格标签&lt;td&gt;&lt;/td&gt;即可。 </li>
</ul>
<img src="./th.png" srcset="/img/loading.gif" />

</li>
</ul>
<blockquote>
<p>th 也是一个单元格   只不过和普通的 td单元格不一样，它会让自己里面的文字居中且加粗</p>
</blockquote>
<h2 id="表格标题caption"><a href="#表格标题caption" class="headerlink" title="表格标题caption"></a>表格标题caption</h2><p><strong>定义和用法</strong></p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">caption</span>&gt;</span>我是表格标题<span class="hljs-tag">&lt;/<span class="hljs-name">caption</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span></code></pre></div>

<p><strong>注意：</strong> </p>
<ol>
<li>caption 元素定义<strong>表格标题</strong>，通常这个标题会被居中且显示于表格之上。</li>
<li>caption 标签必须紧随 table 标签之后。</li>
<li>这个标签只存在 表格里面才有意义。</li>
</ol>
<h2 id="合并单元格-难点"><a href="#合并单元格-难点" class="headerlink" title="合并单元格(难点)"></a>合并单元格(难点)</h2><h3 id="合并单元格2种方式"><a href="#合并单元格2种方式" class="headerlink" title="合并单元格2种方式"></a>合并单元格2种方式</h3><ul>
<li><strong>跨行合并</strong>：rowspan=”合并单元格的个数”      </li>
<li><strong>跨列合并</strong>：colspan=”合并单元格的个数”</li>
</ul>
<img src="./08table合并单元格.jpg" srcset="/img/loading.gif">

<h3 id="合并单元格顺序"><a href="#合并单元格顺序" class="headerlink" title="合并单元格顺序"></a>合并单元格顺序</h3><blockquote>
<p><strong>合并的顺序我们按照   先上 后下     先左  后右 的顺序</strong> </p>
</blockquote>
<h3 id="合并单元格三步曲"><a href="#合并单元格三步曲" class="headerlink" title="合并单元格三步曲"></a>合并单元格三步曲</h3><ol>
<li>先确定是跨行还是跨列合并</li>
<li>根据 先上 后下   先左  后右的原则找到目标单元格    然后写上 合并方式 还有 要合并的单元格数量  比如 ： &lt;td colspan=”3”&gt;  &lt;/td&gt;</li>
<li>删除多余的单元格    </li>
</ol>
<h2 id="表格总结"><a href="#表格总结" class="headerlink" title="表格总结"></a>表格总结</h2><table>
<thead>
<tr>
<th>标签名</th>
<th align="left">定义</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody><tr>
<td>&lt;table&gt;&lt;/table&gt;</td>
<td align="left">表格标签</td>
<td align="left">就是一个四方的盒子</td>
</tr>
<tr>
<td>&lt;tr&gt;&lt;/tr&gt;</td>
<td align="left">表格行标签</td>
<td align="left">行标签要再table标签内部才有意义</td>
</tr>
<tr>
<td>&lt;td&gt;&lt;/td&gt;</td>
<td align="left">单元格标签</td>
<td align="left">单元格标签是个容器级元素，可以放任何东西</td>
</tr>
<tr>
<td>&lt;th&gt;&lt;/th&gt;</td>
<td align="left">表头单元格标签</td>
<td align="left">它还是一个单元格，但是里面的文字会居中且加粗</td>
</tr>
<tr>
<td>&lt;caption&gt;&lt;/caption&gt;</td>
<td align="left">表格标题标签</td>
<td align="left">表格的标题，跟着表格一起走，和表格居中对齐</td>
</tr>
<tr>
<td>clospan 和 rowspan</td>
<td align="left">合并属性</td>
<td align="left">用来合并单元格的</td>
</tr>
</tbody></table>
<ol>
<li>表格提供了HTML 中定义表格式数据的方法。</li>
<li>表格中由行中的单元格组成。</li>
<li>表格中没有列元素，列的个数取决于行的单元格个数。</li>
<li>表格不要纠结于外观，那是CSS 的作用。</li>
<li>表格的学习要求：  能手写表格结构，并且能简单合并单元格。</li>
</ol>
<h2 id="表格划分结构（了解）"><a href="#表格划分结构（了解）" class="headerlink" title="表格划分结构（了解）"></a>表格划分结构（了解）</h2><blockquote>
<p>对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构</p>
</blockquote>
<img src="./thead.png" srcset="/img/loading.gif" />

<p><strong>注意：</strong></p>
<ol>
<li>&lt;thead&gt;&lt;/thead&gt;：用于定义表格的头部。用来放标题之类的东西。&lt;thead&gt; 内部必须拥有 &lt;tr&gt; 标签！</li>
<li>&lt;tbody&gt;&lt;/tbody&gt;：用于定义表格的主体。放数据本体 。</li>
<li>&lt;tfoot&gt;&lt;/tfoot&gt;放表格的脚注之类。</li>
<li>以上标签都是放到table标签中。</li>
</ol>
<h1 id="表单标签-掌握"><a href="#表单标签-掌握" class="headerlink" title="表单标签(掌握)"></a>表单标签(掌握)</h1><p><strong>作用：</strong> </p>
<p>表单目的是为了<strong>收集用户信息</strong>。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。</p>
<blockquote>
<p>在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。</p>
</blockquote>
<img src="./bd.png" srcset="/img/loading.gif" />

<p>  <strong>表单控件：</strong> </p>
<p>​       包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。</p>
<p>  <strong>提示信息：</strong></p>
<p>​        一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。</p>
<p>  <strong>表单域：</strong>  </p>
<p>​      他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。</p>
<h2 id="input-控件-重点"><a href="#input-控件-重点" class="headerlink" title="input 控件(重点)"></a>input 控件(重点)</h2><ul>
<li><p>语法：</p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;属性值&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;你好&quot;</span>&gt;</span></code></pre></div>

<ul>
<li>input 输入的意思 </li>
<li>&lt;input /&gt;标签为单标签</li>
<li>type属性设置不同的属性值用来指定不同的控件类型</li>
<li>除了type属性还有别的属性</li>
</ul>
</li>
<li><p><strong>常用属性</strong>：</p>
</li>
</ul>
<img src="./input.png" srcset="/img/loading.gif" />



<h3 id="1-type-属性"><a href="#1-type-属性" class="headerlink" title="1. type 属性"></a>1. type 属性</h3><ul>
<li>这个属性通过改变值，可以决定了你属于那种input表单。</li>
<li>比如 type = ‘text’  就表示 文本框 可以做 用户名， 昵称等。</li>
<li>比如 type = ‘password’  就是表示密码框   用户输入的内容 是不可见的。</li>
</ul>
<div class="hljs"><pre><code class="hljs html">用户名: <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> /&gt;</span> 
密  码：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;password&quot;</span> /&gt;</span></code></pre></div>

<h3 id="2-value属性-值"><a href="#2-value属性-值" class="headerlink" title="2. value属性   值"></a>2. value属性   值</h3><div class="hljs"><pre><code class="hljs html">用户名:<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>  <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;username&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span>&gt;</span></code></pre></div>

<ul>
<li>value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。</li>
</ul>
<h3 id="3-name属性"><a href="#3-name属性" class="headerlink" title="3. name属性"></a>3. name属性</h3><div class="hljs"><pre><code class="hljs html">用户名:<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>  <span class="hljs-attr">name</span>=<span class="hljs-string">“username”</span> /&gt;</span></code></pre></div>

<p>name表单的名字， 这样，后台可以通过这个name属性找到这个表单。  页面中的表单很多，name主要作用就是用于区别不同的表单。</p>
<ul>
<li>name属性后面的值，是我们自己定义的。</li>
</ul>
<ul>
<li>radio  如果是一组，我们必须给他们命名相同的名字 name   这样就可以多个选其中的一个啦</li>
</ul>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span>  /&gt;</span>男
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> /&gt;</span>女</code></pre></div>

<ul>
<li>name属性，我们现在用的较少， 但是，当我们学ajax 和后台的时候，是必须的。</li>
</ul>
<h3 id="4-checked属性"><a href="#4-checked属性" class="headerlink" title="4. checked属性"></a>4. checked属性</h3><ul>
<li>表示默认选中状态。  较常见于 单选按钮和复选按钮。</li>
</ul>
<div class="hljs"><pre><code class="hljs html">性    别:
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;男&quot;</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;checked&quot;</span> /&gt;</span>男
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;女&quot;</span> /&gt;</span>女</code></pre></div>

<p>上面这个，表示就默认选中了 男 这个单选按钮</p>
<h3 id="5-input-属性小结"><a href="#5-input-属性小结" class="headerlink" title="5. input 属性小结"></a>5. input 属性小结</h3><table>
<thead>
<tr>
<th>属性</th>
<th align="left">说明</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>type</td>
<td align="left">表单类型</td>
<td>用来指定不同的控件类型</td>
</tr>
<tr>
<td>value</td>
<td align="left">表单值</td>
<td>表单里面默认显示的文本</td>
</tr>
<tr>
<td>name</td>
<td align="left">表单名字</td>
<td>页面中的表单很多，name主要作用就是用于区别不同的表单。</td>
</tr>
<tr>
<td>checked</td>
<td align="left">默认选中</td>
<td>表示那个单选或者复选按钮一开始就被选中了</td>
</tr>
</tbody></table>
<h2 id="label标签-理解"><a href="#label标签-理解" class="headerlink" title="label标签(理解)"></a>label标签(理解)</h2><p><strong>目标：</strong></p>
<p>label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。</p>
<p><strong>概念：</strong></p>
<p>label 标签为 input 元素定义标注（标签）。</p>
<p><strong>作用：</strong> </p>
<p> 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。</p>
<p><strong>如何绑定元素呢？</strong></p>
<ol>
<li>第一种用法就是用label直接包括input表单。</li>
</ol>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span> 用户名： <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;usename&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span>&gt;</span>   <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span></code></pre></div>

<p>   适合单个表单选择</p>
<ol start="2">
<li>第二种用法 for 属性规定 label 与哪个表单元素绑定。</li>
</ol>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">&quot;sex&quot;</span>&gt;</span>男<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span>  <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;sex&quot;</span>&gt;</span></code></pre></div>

<blockquote>
<p> 当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面</p>
</blockquote>
<h2 id="textarea控件-文本域"><a href="#textarea控件-文本域" class="headerlink" title="textarea控件(文本域)"></a>textarea控件(文本域)</h2><img src="./textarea.png" srcset="/img/loading.gif" />

<ul>
<li><strong>语法</strong>：</li>
</ul>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">textarea</span> &gt;</span>
  文本内容
<span class="hljs-tag">&lt;/<span class="hljs-name">textarea</span>&gt;</span></code></pre></div>

<ul>
<li><p><strong>作用</strong>：</p>
<p>通过textarea控件可以轻松地创建多行文本输入框.</p>
<p>cols=”每行中的字符数” rows=”显示的行数”  我们实际开发不用</p>
</li>
</ul>
<h4 id="文本框和文本域区别"><a href="#文本框和文本域区别" class="headerlink" title="文本框和文本域区别"></a>文本框和文本域区别</h4><table>
<thead>
<tr>
<th align="left">表单</th>
<th align="center">名称</th>
<th align="center">区别</th>
<th align="right">默认值显示</th>
<th align="right">用于场景</th>
</tr>
</thead>
<tbody><tr>
<td align="left">input type=”text”</td>
<td align="center">文本框</td>
<td align="center">只能显示一行文本</td>
<td align="right">单标签，通过value显示默认值</td>
<td align="right">用户名、昵称、密码等</td>
</tr>
<tr>
<td align="left">textarea</td>
<td align="center">文本域</td>
<td align="center">可以显示多行文本</td>
<td align="right">双标签，默认值写到标签中间</td>
<td align="right">留言板</td>
</tr>
</tbody></table>
<h2 id="select下拉列表"><a href="#select下拉列表" class="headerlink" title="select下拉列表"></a>select下拉列表</h2><p><strong>目的：</strong></p>
<p>如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。</p>
<p><strong>语法：</strong></p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">select</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>选项1<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>选项2<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">option</span>&gt;</span>选项3<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span>
  ...
<span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span></code></pre></div>

<ul>
<li>注意：</li>
</ul>
<ol>
<li>&lt;select&gt;  中至少包含一对 option </li>
<li>在option 中定义selected =” selected “时，当前项即为默认选中项。</li>
<li>但是我们实际开发会用的比较少</li>
</ol>
<h2 id="form表单域"><a href="#form表单域" class="headerlink" title="form表单域"></a>form表单域</h2><ul>
<li><p>收集的用户信息怎么传递给服务器？</p>
<p>通过form表单域</p>
</li>
<li><p>目的：</p>
<p>在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。</p>
</li>
</ul>
<p>**语法: **</p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;url地址&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;提交方式&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;表单名称&quot;</span>&gt;</span>
  各种表单控件
<span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre></div>


<p><strong>常用属性：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th align="left">属性值</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>action</td>
<td align="left">url地址</td>
<td>用于指定接收并处理表单数据的服务器程序的url地址。</td>
</tr>
<tr>
<td>method</td>
<td align="left">get/post</td>
<td>用于设置表单数据的提交方式，其取值为get或post。</td>
</tr>
<tr>
<td>name</td>
<td align="left">名称</td>
<td>用于指定表单的名称，以区分同一个页面中的多个表单。</td>
</tr>
</tbody></table>
<h2 id="团队约定"><a href="#团队约定" class="headerlink" title="团队约定"></a>团队约定</h2><h3 id="元素属性"><a href="#元素属性" class="headerlink" title="元素属性"></a>元素属性</h3><ul>
<li>元素属性值使用双引号语法</li>
<li>元素属性值可以写上的都写上</li>
</ul>
<p><em>推荐：</em></p>
<div class="hljs"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> /&gt;</span>    
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;name&quot;</span> <span class="hljs-attr">checked</span>=<span class="hljs-string">&quot;checked&quot;</span> /&gt;</span></code></pre></div>

<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><img src="./guifan.png" srcset="/img/loading.gif" /><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kity@2.0.4/dist/kity.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/kityminder-core@1.4.50/dist/kityminder.core.min.js"></script><script defer="true" type="text/javascript" src="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/hexo-simple-mindmap@0.2.0/dist/mindmap.min.css">
            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                    
                      <a class="hover-with-bg" href="/categories/%E5%89%8D%E7%AB%AF/HTML/">HTML</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/HTML/">HTML</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p>
              
              
                <div class="post-prevnext row">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2020/08/15/HelloVue/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">HelloVue</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2020/08/15/HTML%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/">
                        <span class="hidden-mobile">HTML常用标签及路径</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments">
                
                

              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div id="tocbot"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">

  
	  <!-- 博客运营时间 -->
	  <div>
		  <span id="timeDate">载入天数...</span>
		  <span id="times">载入时分秒...</span>
		  <script>
		  var now = new Date();
		  function createtime(){
			  var grt= new Date("08/14/2020 00:00:00");//此处修改你的建站时间或者网站上线时间
			  now.setTime(now.getTime()+250);
			  days = (now - grt ) / 1000 / 60 / 60 / 24;
			  dnum = Math.floor(days);
			  hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
			  hnum = Math.floor(hours);
			  if(String(hnum).length ==1 ){
				  hnum = "0" + hnum;
			  }
			  minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
			  mnum = Math.floor(minutes);
			  if(String(mnum).length ==1 ){
						mnum = "0" + mnum;
			  }
			  seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
			  snum = Math.round(seconds);
			  if(String(snum).length ==1 ){
						snum = "0" + snum;
			  }
			  document.getElementById("timeDate").innerHTML = "本站安全运行&nbsp"+dnum+"&nbsp天";
			  document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
		  }
		  setInterval("createtime()",250);
		  </script>
		</div>
		
		
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


		

		
	
		<!-- 一言 -->
		<p id="hitokoto">:D 获取中...</p>
		<script>
		  fetch('https://v1.hitokoto.cn')
			.then(response => response.json())
			.then(data => {
			  const hitokoto = document.getElementById('hitokoto')
			  hitokoto.innerText = data.hitokoto
			  })
			  .catch(console.error)
		</script>
	</div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/main.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/js/clipboard-use.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





  <script  src="https://cdn.staticfile.org/tocbot/4.11.1/tocbot.min.js" ></script>
  <script>
    $(document).ready(function () {
      var boardCtn = $('#board-ctn');
      var boardTop = boardCtn.offset().top;

      tocbot.init({
        tocSelector: '#tocbot',
        contentSelector: '#post-body',
        headingSelector: 'h1,h2,h3,h4,h5,h6',
        linkClass: 'tocbot-link',
        activeLinkClass: 'tocbot-active-link',
        listClass: 'tocbot-list',
        isCollapsedClass: 'tocbot-is-collapsed',
        collapsibleClass: 'tocbot-is-collapsible',
        collapseDepth: 0,
        scrollSmooth: true,
        headingsOffset: -boardTop
      });
      if ($('.toc-list-item').length > 0) {
        $('#toc').css('visibility', 'visible');
      }
    });
  </script>



  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "HTML列表、表格、表单&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>



  <script  src="https://cdn.staticfile.org/anchor-js/4.2.2/anchor.min.js" ></script>
  <script>
    anchors.options = {
      placement: "right",
      visible: "hover",
      
    };
    var el = "h1,h2,h3,h4,h5,h6".split(",");
    var res = [];
    for (item of el) {
      res.push(".markdown-body > " + item)
    }
    anchors.add(res.join(", "))
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    var path = "/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />

  <script>
    $('#post img:not(.no-zoom img, img[no-zoom]), img[zoom]').each(
      function () {
        var element = document.createElement('a');
        $(element).attr('data-fancybox', 'images');
        $(element).attr('href', $(this).attr('src'));
        $(this).wrap(element);
      }
    );
  </script>




















</body>
</html>
